// 身份介绍组件
import React from 'react';
import '../styles/components/comms.css'
import '../styles/components/Idcard.css'
import { Avatar, Divider, Popover } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const content = (1443907639)


const Idcard = () => {
    return (
        <div className="id-div">
            {/* 头像 */}
            <div className="avatar">
                <Avatar size={100} icon={<UserOutlined />} />
            </div>
            {/* 姓名 */}
            <div className="name">前端小哥哥</div>
            {/* 简介 */}
            <div className="brief">一个正在乱撞的前端小码农</div>
            {/* 标签 */}
            <div className="tags">
                <div className="tag">Vue</div>
                <div className="tag">小程序</div>
            </div>
            {/* 分割线 */}
            <Divider>咋找到我</Divider>
            {/* 联系方式分组 */}
            <div className="chats">
                <Popover content={'vuejser'}>
                    <div className="wechat">
                        <i className="iconfont">&#xe63e;</i>
                    </div>
                </Popover>
                <Popover content={1443907639}>
                    <div className="qq">
                        <i className="iconfont">&#xe600;</i>
                    </div>
                </Popover>
                <Popover content={15624079714}>
                    <div className="phone">
                        <i className="iconfont">&#xe608;</i>
                    </div>
                </Popover>
            </div>
        </div>
    )
}

export default Idcard